<template>
	<view>
		<view class="help-pubuBox">
			<u-search placeholder="搜索设备名称、编号" :clearabled="true" :showAction="false" height="40" shape="square"
				color="#2B2B2B" v-model="title" @change="change" @search="chaxun" @custom="chaxun"></u-search>
		</view>
		<view class="search-list">
			<view class="search-item" v-for="(item,index) in List" :key="index" @click="selectItem(item)">
				<view class="item-top">
					<view class="iconfont "
						:class="[listItem.id==item.id?'icon-app-danxuangouxuan select-bg':'icon-app-danxuanweixuan unselect-bg']">
					</view>
					<view class="item-name"> {{item.deviceNum}}—{{item.deviceName}}</view>
				</view>
				<view class="item-txt">
					<view class="left-icon">
						<image v-if="item.devicePicture" :src="item.devicePicture"></image>
						<image v-if="!item.devicePicture" src="../../../static/images/index/weibaorenwu.png" mode="">
						</image>
					</view>
					<view class="right-txt">
						<view class="txt1">设备类型：<text class="color3">{{item.deviceTypeName}}</text></view>
						<view class="txt1">设备型号：<text class="color3">{{item.modelName}}</text></view>
						<view class="txt1">所在部门：<text class="color3">{{item.deptName}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="total>5" :status="status" :line="true" />
		<view class="empty-data" v-if="List.length==0">
			<u-empty mode="data" :marginTop="100" text="暂无搜索内容"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				title: "",
				// actionStyle: {
				// 	color: '#fff',
				// 	background: '#0F53AC',
				// 	padding: '10rpx',
				// 	borderRadius: '8rpx'
				// },
				currentPage: '',
				selectFlag: false,
				pages: 1,
				page: 1,
				comList: [],
				List: [],
				listItem: {},
				total: 0,
				params: {
					pn: 1,
					ps: 5,
					deviceType: '',
					keyword: ''
				}
			}
		},
		onLoad(option) {
			uni.$on('update', (data) => {
				console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
			})
			this.selectFlag = false
			this.getList()
		},
		methods: {
			change(v) {
				this.title = v
				this.List = [];
				this.params.keyword = this.title
				this.params.pn = 1;
				this.getList();
			},
			chaxun() {
				console.log('dfdsfdsf', this.title)
				// if (!this.title) {
				// 	return uni.showToast({
				// 		icon: 'none',
				// 		title: '搜索内容不能为空！'
				// 	})
				// }
				this.List = [];
				this.params.keyword = this.title
				this.params.pn = 1;
				this.getList();
			},
			selectItem(item) {
				console.log('选中了---->', item)
				this.listItem = item;
				if (!this.selectFlag) {
					this.selectFlag = true
					setTimeout(() => {
						let pages = getCurrentPages(); //获取所有页面栈实例列表
						let nowPage = pages[pages.length - 1]; //当前页页面实例
						let prevPage = pages[pages.length - 2]; //上一页页面实例
						prevPage.$vm.detailList = item; //修改上一页data里面的地址
						prevPage.$vm.wbTypeList2 = []; //修改上一页data里面的地址
						uni.$emit('weiwaiRepair', item);
						uni.navigateBack({
							delta: 1 //返回层数，2则上上页
						});
					}, 500)
				}
			},
			getList() {
				uni.$u.http.post(`/device/mobile/deviceInfo/getDeviceList`, this.params).then(res => {
					if (res.code == 0) {
						console.log('data数据===>', res)
						this.List = this.List.concat(res.data.records);
						this.pages = res.data.pages;
						this.total = res.data.total;
					}
				}).catch(err => {})
			}
		},
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		}
	}
</script>

<style lang="scss">
	.page {
		background: #ffffff;
	}

	.help-pubuBox {
		padding: 22rpx;
		background: #fff;
	}

	.search-list {
		background: #fff;
		margin-top: 4rpx;

		.search-item {
			padding: 30rpx;
			border-bottom: 1px solid #f2f2f2;

			.item-top {
				display: flex;
				align-items: center;

				.unselect-bg {
					margin-right: 20rpx;
					color: #ffffff;
					font-size: 48rpx;
					text-shadow: 0 1px #E0E0E0, 1px 0 #E0E0E0, -1px 0 #E0E0E0, 0 -1px #E0E0E0;
				}

				.select-bg {
					margin-right: 20rpx;
					color: #0F53AC;
					font-size: 48rpx;
					// text-shadow: 0 1px #E0E0E0, 1px 0 #E0E0E0, -1px 0 #E0E0E0, 0 -1px #E0E0E0;
				}

				.item-name {
					color: #2B2B2B;
					font-size: 34rpx;
				}

			}

			.item-txt {
				padding: 20rpx 0 20rpx 70rpx;
				display: flex;

				.left-icon {
					width: 136rpx;
					height: 136rpx;
					background: rgba(242, 242, 242, 1);
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 136rpx;
						height: 136rpx;
						border-radius: 8rpx;
					}
				}

				.right-txt {
					padding-left: 32rpx;

					.txt1 {
						font-size: 28rpx;
						color: #8c8c8c;
						padding-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>